<script lang="ts" setup>
import { ref } from 'vue'
import {CircleCloseFilled, Edit, PictureFilled, Plus} from '@element-plus/icons-vue'
import {getAllImage, editImage, forbiddenImage, unForbiddenImage} from '@/api/image.js'

import type { UploadProps, UploadUserFile } from 'element-plus'
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";

const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food2.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])
// const fileList = ref([])
//获取轮播图信息
const getLoginPageImgList = async () => {
  let result = await getAllImage()
  console.log(result.date)
  if (result.code == 200) {
    tableData.value = result.date

    //如果成功 先清空imageurl
    fileList.value = []
    result.date.forEach((item,index) => {
      const list: UploadUserFile ={
        name: item.name,
        url: item.imgUrl
      }
      fileList.value.push(list)
    })
  }
  console.log("zzzzzzzzzzzzzzzzzzzzzz")
  console.log(tableData.value)
  console.log(fileList.value)
}
getLoginPageImgList()

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}

//上传成功
const token = localStorage.getItem('token');
const uploadSuccess = (result)=>{
  console.log('上传成功的回调函数')
  console.log(result.date)
  ElNotification({
    title: '上传结果',
    message: '上传图片成功!',
    type: 'success'
  })
}

const tableData = ref([])
//转换后端拿到的图片路径 转换为webpack能理解的路径
const resolveImageUrl = (path: string) => {
  return new URL(`../${path}`, import.meta.url).href;
};
const test1 = (url) =>{
  console.log(url)
}

//编辑图片
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const imageInfo = ref({
  id:'',
  name:'',
  type:'',
  isDeleted:'',
  imgUrl:'',
  createTime:'',
  updateTime:''
})
const editImageButton = (row)=>{
  imageInfo.value.id = row.id
  dialogFormVisible.value = true
}
const submitEditImage = async () => {
  dialogFormVisible.value = false
  let result = await editImage(imageInfo.value)
  if (result.code == 200) {
    ElNotification({
      title: '编辑图片结果',
      message: '编辑图片成功!',
      type: 'success'
    })
    getLoginPageImgList()
  }else {
    ElNotification({
      title: '编辑图片结果',
      message: '编辑图片失败!',
      type: 'error'
    })
  }
}

const forbiddenImageButton = async (name) => {
  let result = await forbiddenImage(name)
  if (result.code == 200) {
    ElNotification({
      title: '图片禁用结果',
      message: '禁用图片成功!',
      type: 'success'
    })
    getLoginPageImgList()
  }else {
    ElNotification({
      title: '图片禁用结果',
      message: '禁用图片失败!',
      type: 'error'
    })
  }
}
const unForbiddenImageButton = async (name) => {
  let result = await unForbiddenImage(name)
  if (result.code == 200) {
    ElNotification({
      title: '图片解禁结果',
      message: '禁用解禁成功!',
      type: 'success'
    })
    getLoginPageImgList()
  }else {
    ElNotification({
      title: '图片解禁结果',
      message: '禁用解禁失败!',
      type: 'error'
    })
  }
}
//重复确认是否禁用的框
const confirmIsForbiddenButton = (imageName) => {
  ElMessageBox.confirm(
      '确认要禁用吗？',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        forbiddenImageButton(imageName)
        ElMessage({
          type: 'success',
          message: '禁用成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '禁用失败',
        })
      })
}
const imageOptions = ref([
    {
      value: '登录',
      label: '登录'
    },
    {
      value: '主页',
      label: '主页'
    },
])
</script>

<template>
  <div class="imageManagerMain">
    <h1>图片管理页面</h1>
    <!--
          auto-upload:设置是否自动上传
          action:设置服务器接口路径
          name:设置上传的文件字段名
          headers:设置上传的请求头
          on-success:设置上传成功的回调函数
    -->
<!--    v-model:file-list="fileList"-->
    <el-upload

        class="upload-demo"
        name="file"
        :headers="{'Authorization':token}"
        action="http://localhost:8090/image/uploadImage?MultipartFile"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="uploadSuccess"
        list-type="picture"
    >
      <el-button type="primary">上传新图片</el-button>
      <template #tip>
        <div class="el-upload__tip">
          支持格式：jpg/png 占用大小小于 500kb
        </div>
      </template>
    </el-upload>
    <el-button type="primary" plain @click="getLoginPageImgList">刷新</el-button>
<!--    <img v-for="(item,index) in fileList" :key="index" :src="item.url" :alt="item.name"/>-->
    <el-table :data="tableData" height="400" style="width: 100%">
      <el-table-column label="图片" width="180">
        <template #default="scope">
          <el-image :src="scope.row.imgUrl" alt="图片" style="width: 100px; height: 50px;" @click="test1(scope.row.imgUrl)">
<!--            <template #src>
              scope.row.imgUrl
            </template>-->
          </el-image>
<!--          <img :src="scope.row.imgUrl" alt="图片" style="width: 50px; height: 50px;" @click="test1(scope.row.imgUrl)"/>-->
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="180" />
      <el-table-column prop="name" label="图片名" width="120" />
      <el-table-column prop="isDeleted" label="是否禁用" width="120" />
      <el-table-column prop="imgUrl" label="图片地址" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" type="primary" @click="editImageButton(scope.row)">
            <el-icon><Edit/></el-icon>编辑</el-button>
          <el-button size="mini" type="success" @click="unForbiddenImageButton(scope.row.name)">
            <el-icon><PictureFilled/></el-icon>解禁</el-button>
          <el-button size="mini" type="danger" @click="confirmIsForbiddenButton(scope.row.name)">
            <el-icon><CircleCloseFilled/></el-icon>禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    <img src="@/assets/主页轮播图1.jpg"/>
    <img src="@/assets/轮播图1.jpg"/>-->
<!--    <img v-for="(item,index) in tableData" :key="index" :src="item.imgUrl" alt="图片"/>-->
  </div>

  <div>
    <el-dialog v-model="dialogFormVisible" title="修改图片信息" width="500">
      <el-form :model="imageInfo">
        <el-form-item label="图片名称" :label-width="formLabelWidth">
          <el-input v-model="imageInfo.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图片类型" :label-width="formLabelWidth">
<!--          <el-input v-model="imageInfo.type" autocomplete="off" />-->
          <el-select
              v-model="imageInfo.type"
              placeholder="选择轮播图的类型"
              size="large"
              style="width: 240px"
          >
            <el-option
                v-for="item in imageOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="图片url" :label-width="formLabelWidth">
          <el-input v-model="imageInfo.imgUrl" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEditImage()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.imageManagerMain {
  height: 400px;
}
</style>